<template>
  <view class="content">
    <view class="movie-info">
      <u-image
        :src="require('@/static/images/movie/' + movie.imgSrc)"
        width="210rpx"
        height="310rpx"
        border-radius="10rpx"
      ></u-image>
      <view class="detail">
        <view class="order-number">订单号： {{ createOrderNumber() }}</view>
        <view class="movie-name">{{ movie.title }}</view>
        <view class="opera-name">{{ operaName }} · {{ movie.language }}</view>
      </view>
    </view>
    <view class="divider"></view>
    <view class="set-info">
      <view class="item">
        <text>观影日期</text>
        <view>{{ date }}</view>
      </view>
      <view class="item">
        <text>时间</text>
        <view>{{ time }}</view>
      </view>
      <view class="item">
        <text>座位</text>
        <view class="sets">
          <view v-for="item in sets" :key="item">{{ item }}</view>
        </view>
      </view>
      <view class="item">
        <text>座位总数</text>
        <view>{{ sets.length }}</view>
      </view>
      <view class="item">
        <text>总价</text>
        <view>￥{{ (sets.length * movie.price).toFixed(2) }}</view>
      </view>
      <view class="item">
        <text>服务费</text>
        <view>￥3.00</view>
      </view>
      <view class="item">
        <text>优惠</text>
        <view class="discount">-￥0.00</view>
      </view>
    </view>
    <view class="divider"></view>
    <view class="total">
      <text>总计</text>
      <text>￥{{ (sets.length * movie.price).toFixed(2) }}</text>
    </view>
    <view class="btn" @click="toPay">去支付</view>

    <!-- 弹窗确认支付 -->
    <u-popup
      v-model="isShowPopup"
      mode="bottom"
      border-radius="10"
      :safe-area-inset-bottom="true"
      :closeable="true"
    >
      <view class="pay-content">
        <view class="card">
          <view class="card-title">
            <view>信用卡</view>
            <u-image
              src="@/static/images/card.png"
              width="160rpx"
              mode="widthFix"
            ></u-image>
          </view>
          <view class="card-number">**** **** **** **** 2135</view>
          <view class="userName">李**</view>
        </view>
        <view class="total-price">
          <text>总计</text>
          <view>￥{{ (sets.length * movie.price).toFixed(2) }}</view>
        </view>
        <view class="btn" @click="payConfirm">立即支付</view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from '@vue/composition-api';
import { getDayByDate } from '@/utils/getDay';
import { createOrderNumber } from '@/utils/randomOrderNumber';
import { IMovie } from '@/@types/common';
import PAGE from '@/const/page';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const movieData = require('@/mock/movie/index.json');

export default defineComponent({
  onLoad(options) {
    this.movieId = options?.movieId || '';
    this.operaName = options?.operaName || '';
    this.date = options?.date || '';
    this.day = getDayByDate(this.date);
    this.time = options?.time || '';
    this.sets = options?.sets.split(',') || '';

    //获取所选电影详情
    this.getMovieInfo();
  },
  setup() {
    const state = reactive({
      movieId: '',
      operaName: '',
      date: '',
      day: '',
      time: '',
      sets: [],
    });

    const movie = ref<IMovie>();
    const isShowPopup = ref(false);
    return {
      ...toRefs(state),
      movie,
      createOrderNumber,
      isShowPopup,
    };
  },
  methods: {
    getMovieInfo() {
      movieData.movies.forEach((item: IMovie) => {
        if (item.id === this.movieId) {
          this.movie = item;
        }
      });
    },
    toPay() {
      this.isShowPopup = true;
    },
    payConfirm() {
      this.isShowPopup = false;
      uni.navigateTo({
        url:
          PAGE.PURCHASED.PATH +
          '?movieId=' +
          this.movieId +
          '&operaName=' +
          this.operaName +
          '&date=' +
          this.date +
          '&time=' +
          this.time +
          '&sets=' +
          this.sets.join(','),
      });
    },
  },
});
</script>

<style lang="scss" scoped>
.movie-info {
  width: 100%;
  height: 380rpx;
  padding: 40rpx;
  display: flex;

  .detail {
    margin-left: 20rpx;
    width: calc(100% - 100rpx - 210rpx);
    display: flex;
    flex-direction: column;
    justify-content: center;
    .order-number {
      font-size: 28rpx;
      color: $u-type-primary;
    }

    .movie-name {
      font-size: 32rpx;
      font-weight: 700;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin: 20rpx 0rpx;
    }

    .opera-name {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.divider {
  width: 100%;
  height: 20rpx;
  background-color: #edf1f8;
}

.set-info {
  width: 100%;
  padding: 40rpx 40rpx 0rpx 40rpx;
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 50%;
    margin-bottom: 30rpx;

    view {
      width: 100%;
      height: 50rpx;
      font-size: 28rpx;
      font-weight: 700;
      margin-top: 24rpx;
      line-height: 50rpx;
    }

    .sets {
      display: flex;
      align-items: center;

      view {
        width: 44rpx;
        height: 44rpx;
        background-color: #4074ff;
        text-align: center;
        line-height: 44rpx;
        border-radius: 8rpx;
        font-size: 24rpx;
        font-weight: 700;
        color: #fff;
        margin: 0;
        margin-right: 18rpx;
      }
    }

    .discount {
      color: red;
    }
  }
}

.total {
  width: 100%;
  padding: 0rpx 40rpx;
  display: flex;
  padding-top: 30rpx;
  justify-content: space-between;
  font-size: 32rpx;
  font-weight: 700;
}

.btn {
  width: calc(100% - 80rpx);
  height: 100rpx;
  margin: 0rpx 40rpx;
  margin-top: 30rpx;
  background-color: $u-type-primary;
  color: #fff;
  font-size: 32rpx;
  font-weight: 700;
  text-align: center;
  line-height: 100rpx;
  border-radius: 14rpx;
}

.pay-content {
  width: calc(100% - 80rpx);
  margin: 40rpx;

  .card {
    margin-top: 90rpx;
    background-color: #43b2be;
    color: #fff;
    border-radius: 15rpx;
    padding: 50rpx;

    .card-title {
      display: flex;
      justify-content: space-between;
    }

    .card-number {
      margin-top: 100rpx;
    }

    .userName {
      margin-top: 30rpx;
    }
  }

  .total-price {
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
    font-weight: 700;
    margin: 40rpx 0rpx;
  }

  .btn {
    width: 100%;
    margin: 0;
  }
}
</style>
